<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-title">行业动态总数</div>
          <div class="stat-value">{{ stats.industryNews }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-title">课程总数</div>
          <div class="stat-value">{{ stats.courseCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-title">会议总数</div>
          <div class="stat-value">{{ stats.meetingCount }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表展示 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">内容分类占比</div>
          <v-chart v-if="ready" :option="pieChartOptions" autoresize style="height: 300px"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">最近一周发布趋势</div>
          <v-chart v-if="ready" :option="lineChartOptions" autoresize style="height: 300px"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from 'vue'
import VChart from 'vue-echarts'
import {getAnalyze, getPublish} from '@/api/index'

const ready = ref(false)

onMounted(async () => {
  try {
    const [statsRes, trendRes] = await Promise.all([
      getAnalyze(),
      getPublish()
    ])

    stats.value = {
      industryNews: statsRes.data.industryCount,
      courseCount: statsRes.data.courseCount,
      meetingCount: statsRes.data.meetingCount
    }

    pieChartOptions.value.series[0].data = [
      {value: statsRes.data.industryCount, name: '行业动态'},
      {value: statsRes.data.courseCount, name: '课程'},
      {value: statsRes.data.meetingCount, name: '会议'}
    ]

    // 生成近7天的日期范围(存储为YYYY-MM-DD，显示为MM-DD)
    const dates = []
    const now = new Date()
    for (let i = 6; i >= 0; i--) {
      const date = new Date(now)
      date.setDate(date.getDate() - i)
      const year = date.getFullYear().toString()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      dates.push(`${year}-${month}-${day}`) // 存储完整格式用于数据匹配
    }

    // 格式化日期数据
    const formatData = (dataList) => {
      const dataMap = new Map()
      dataList.forEach(item => {
        // 确保日期格式一致
        const formattedDate = item.date
        dataMap.set(formattedDate, parseInt(item.num))
      })

      return dates.map(date => {
        return dataMap.get(date) || 0
      })
    }

    // 更新折线图配置
    lineChartOptions.value.xAxis.data = dates
    lineChartOptions.value.series[0].data = formatData(trendRes.data.industryTrendList)
    lineChartOptions.value.series[1].data = formatData(trendRes.data.courseList)
    lineChartOptions.value.series[2].data = formatData(trendRes.data.meetingList)
  } catch (error) {
    console.error('获取数据失败:', error)
  }
  await nextTick()
  ready.value = true
})

const stats = ref({
  industryNews: 0,
  courseCount: 0,
  meetingCount: 0
})

const pieChartOptions = ref({
  tooltip: {trigger: 'item'},
  legend: {bottom: 0},
  series: [
    {
      name: '内容占比',
      type: 'pie',
      radius: '60%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

const lineChartOptions = ref({
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255,255,255,0.9)',
    borderColor: '#eee',
    borderWidth: 1,
    padding: [10, 15],
    textStyle: {
      color: '#333'
    },
    axisPointer: {
      type: 'shadow',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['行业动态', '课程', '会议'],
    textStyle: {
      color: '#666'
    },
    itemHeight: 12,
    itemWidth: 12,
    itemGap: 20
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLine: {
      lineStyle: {
        color: '#eee'
      }
    },
    axisLabel: {
      interval: 0,
      color: '#333',
      formatter: function (value) {
        return value.slice(5) // 显示MM-DD格式
      }
    }
  },
  yAxis: {
    type: 'value',
    interval: 1,
    axisLine: {
      lineStyle: {
        color: '#eee'
      }
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#f5f5f5'
      }
    },
    axisLabel: {
      color: '#333',
      formatter: function (value) {
        return Math.floor(value)
      }
    }
  },
  series: [
    {
      name: '行业动态',
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3,
        color: '#5470c6'
      },
      showSymbol: false,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(84, 112, 198, 0.5)'
          }, {
            offset: 1,
            color: 'rgba(84, 112, 198, 0.1)'
          }]
        }
      },
      data: []
    },
    {
      name: '课程',
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3,
        color: '#91cc75'
      },
      showSymbol: false,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(145, 204, 117, 0.5)'
          }, {
            offset: 1,
            color: 'rgba(145, 204, 117, 0.1)'
          }]
        }
      },
      data: []
    },
    {
      name: '会议',
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3,
        color: '#fac858'
      },
      showSymbol: false,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(250, 200, 88, 0.5)'
          }, {
            offset: 1,
            color: 'rgba(250, 200, 88, 0.1)'
          }]
        }
      },
      data: []
    }
  ]
})
</script>

<style scoped>
.dashboard-container {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}

.stat-card {
  background: linear-gradient(to right, #e0f7fa, #ffffff);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.stat-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  color: #333;
  font-weight: bold;
}

.chart-title {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
}

.mb-4 {
  margin-bottom: 24px;
}
</style>
